<template>
  <div>
    <el-button type="text" @click="dialogTableVisible = true">文件上传</el-button>
    <el-dialog :visible.sync="dialogTableVisible" class="elTable" width="630px">
      <el-table :data="signData">
        <el-table-column property="msgContent" label="文件名" class="el-first" >
          <template slot-scope="scope">
            <p style="color:#53c7f0; font-weight:bold">{{scope.row.msgContent}}</p>
          </template>
        </el-table-column>
        <el-table-column property="sendTime" label="发送时间" width="150px"></el-table-column>
        <el-table-column property="msgFrom" label="发送者" width="180px"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button size="mini">
              <i class="el-icon-download"></i>下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "sign",
  data () {
    return {
      signData: [{
        msgContent: 'swiper插件安装教程',
        sendTime: '2016-08-01',
        msgFrom: '刘安光'
      }, {
        msgContent: 'java基础开发教程',
        sendTime: '2016-06-15',
        msgFrom: '刘晨馨'
      }, {
        msgContent: 'spring MVC教程',
        sendTime: '2016-06-22',
        msgFrom: 'autumn-dell-liu'
      }, {
        msgContent: 'J2 EE 教程',
        sendTime: '2016-06-19',
        msgFrom: '韩慧妍'
      }],
      dialogTableVisible: false
    }
  }
}
</script>

<style lang="stylus" scoped>
.elTable >>> .cell {
  text-align: center;
}

.elTable >>> .el-dialog__body {
  padding-top: 0;
}

.elTable {
  text-align: center;
}
</style>
